﻿<!DOCTYPE html>
<html>

<head lang="en">
    <title>提问详情</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/myStrategyComment.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <!--<link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
    <script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>-->
    <script src="js/common.js"></script>
    <script>
        $(function () {

            var user = JSON.parse(sessionStorage.getItem("user"));
            var params = getParams();
        
            function queryQuestion() {
                    //查询目标问题,并渲染数据
                    $.get('/questions/'+params.id,function (data) {
                        $('.question').renderValues(data,{
                                getHref:function (item, value) {
                                    $(item).attr('href',$(item).data('href')+value)
                                }
                        });
                        $('#likeNum').html(data.likeNum)
                    });
                getAnswerNum()
            }
            function getAnswerNum() {
                //查询回答数量
                $.get('/questions/'+params.id+'/answerNum',function (data) {
                    $('#totalAnswers').html(data)
                })
            }

            //获取回答
            function queryAnswer() {
                $.get('/questions/'+params.id+'/answers',function (data) {
                    $('.answer').renderValues(data,{
                        getHref:function (item,value) {
                            $(item).attr('href',$(item).data('href')+value)
                        }
                    })
                })
            }

            if(params.id){
                queryQuestion();
                queryAnswer();
            }


            //回答登录判断
            $('#content').click(function () {
                if(!user){
                    $(document).dialog({
                        type: 'confirm',
                        closeBtnShow: false,
                        content: '先登录下吧,亲',
                        onClickConfirmBtn: function () {
                            location.href = "/login.html"
                        }
                    })
                }
            });
            
            //发送回答
            $('#send').click(function () {
                if(user){
                    var content = $('#content').val();
                    if (content == null || content =="") {
                        $(document).dialog({
                            autoClose: 3000,
                            content: '请输入你的评论内容'
                        })
                    }else{
                        $.post('/questions/'+params.id+'/answer',{content:content},function (data) {
                            if(data.success){
                                queryAnswer();
                                getAnswerNum();
                            }else {
                                $(document).dialog({
                                    content: data.msg
                                })
                            }
                        })
                    }

                }else{
                    $(document).dialog({
                        type: 'confirm',
                        closeBtnShow: false,
                        content: '先登录下吧,亲',
                        onClickConfirmBtn: function () {
                            location.href = "/login.html"
                        }
                    })
                }
            });

            //获取点赞数
            function getLikeNum() {
                $.get('/questions/'+params.id +'/getLikeNum',function (data) {
                    console.log(data);
                    $('#likeNum').html(data)
                })
            }

            //获取当前用户是否已点赞
            if(params.id){
                if(user){
                    $.get('/questions/likeRelation',{questionId:params.id,userId:user.id},function (data) {
                        if(data){
                            $('#likeBtn').css('color','#f40505')
                        }else{
                            $('#likeBtn').css('color','#1e1a10')
                        }
                    });
                }


                //点赞事件
                $('#likeBtn').click(function () {
                    //判断是否登录
                    if(user){
                        //判断是否点赞了
                        var css = $('#likeBtn').attr('style');
                        if(css=='font-size:20px;color:#1e1a10'){
                            //没有点赞,保存关系
                            $.post('questions/saveLike',{questionId:params.id,userId:user.id},function (data) {
                                if(data.success){
                                    //改变样式
                                    $('#likeBtn').attr('style','font-size:20px;color:#f40505');
                                    //查询点赞数
                                    getLikeNum();
                                }
                            })

                        }else{
                            //本来点了赞,取消点赞,删除关系
                            $.ajax({
                                url:'/questions/deleteLike',
                                type:'post',
                                data:{_method:'delete',questionId:params.id,userId:user.id},
                                success:function (data) {
                                    if(data.success){
                                        //改变样式
                                        $('#likeBtn').attr('style','font-size:20px;color:#1e1a10');
                                        //查询点赞数
                                        getLikeNum();
                                    }
                                }
                            })
                        }
                    }else {
                        $(document).dialog({
                            type: 'confirm',
                            closeBtnShow: false,
                            content: '先登录下吧,亲',
                            onClickConfirmBtn: function () {
                                location.href = "/login.html"
                            }
                        })
                    }
                })
            }



            
        })
    </script>

</head>

<body>

<form method="post" id="answerForm">
    <input type="hidden" name="content" class="content">
</form>

<div class="search-head">
    <div class="row nav-search">
        <div class="col" id="back">
            <a href="javascript:window.history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>问题详细</span>
        </div>
        <div id="collect" class="col" style="text-align: right"></div>
    </div>
</div>
<br/>
<div class="question">
    <div class="container">
        <div class="row">
            <div class="col-2 comment-head">
                <a data-href="userProfiles.html?id=" render-key="user.id" render-fun="getHref">
                    <img class="rounded-circle " style=" width: 50px" render-src="user.headImgUrl">
                </a>
                <!--<button class="btn btn-success ibtn" id="followBtn">关注</button>-->
                <!--<button class="btn" id="followBtn">
                </button>-->
            </div>
            <div class="col">
                <span class="comment-star" style="color: #f0912c" render-html="user.nickName"></span>
                <span class="comment-date" render-html="releaseTime"></span>
                <span>发布</span>
                <div class="comment-content">
                    <h5 render-html="title"></h5>
                    <img  render-src="coverUrl" style="width: 80%">
                    <p render-html="content"></p>
                </div>
            </div>
        </div>
    </div>

    <div class="count d-flex justify-content-between" id="answerNum" style="padding: 10px 0;border-bottom: 1px solid #aaa;margin-bottom: 20px;">
        <div class="p-2 col-4">回答数:<span id="totalAnswers" style="color: #ec0000" ></span></div>
        <div class="p-2 col-2">
            <i class="fa fa-thumbs-o-up" style="font-size:20px;color:#1e1a10" id="likeBtn"></i>
            <span id="likeNum" style="color: #6d07ef"></span>
        </div>
    </div>
</div>

<div class="answer">
    <div render-loop="list" id="answer">
        <div>
            <div class="container" style="padding: 10px 0;border-bottom: 1px solid #aaa;margin-bottom: 20px;">
                <br/>
                <div class="row">
                    <div class="col-1"></div>
                    <div class="col-2 comment-head">
                        <a data-href="userProfiles.html?id=" render-key="list.user.id" render-fun="getHref">
                            <img class="rounded-circle" style=" width: 50px"  render-src="list.user.headImgUrl">
                        </a>
                    </div>
                    <div class="col">
                        <span class="comment-star" style="color: #f0912c" render-html="list.user.nickName"></span>
                        <span class="comment-date" render-html="list.replyTime"></span>
                        <div class="comment-content">
                            <p render-html="list.content"></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="count d-flex justify-content-between" style="height: 2px">
            </div>
        </div>
    </div>
</div>
<div>
    <br/>
    <br/>
</div>

<div class="operation">
    <div class="d-flex justify-content-between">
        <div class="p-2 commenting" style="text-align: center;width: 100%;position: relative;background:#4D4C4B">
            <i class="fa fa-commenting-o" style="width: 20px;position: absolute;left:3%;top: 30%;color: white"></i>
            <textarea style="width: 80%;height: 30px;font-size: 15px;text-align: left"
                      class="form-control-lg" placeholder="输入你的评论内容" id="content"></textarea>
            <i style="position: absolute;top:27%;left:90%;color:white" id="send">发送</i>
        </div>
    </div>
</div>


</body>
<style>
</style>
</html>